<template>
  <div>
    <el-icon size="25" @click="toggleTheme">
      <!-- 根据 expanded 的值显示不同的图标 -->
      <template v-if="theme.system === SystemThemeEnum.LIGHT">
        <Sunny />
      </template>
      <template v-else>
        <Moon />
      </template>
    </el-icon>
  </div>
</template>

<script setup lang="ts">
import {useLayouts} from "@/stores/modules/layouts.ts";
import {SystemThemeEnum} from "@/types/layouts.ts";

// 获取 layouts 状态
const layouts = useLayouts()
// 使用 storeToRefs 解构出来的属性默认是只读的，不能改变值，修改也无法响应式更新
const { theme } = storeToRefs(layouts)

// 切换主题
const toggleTheme = () => {
  theme.value.system = theme.value.system === SystemThemeEnum.LIGHT? SystemThemeEnum.DARK : SystemThemeEnum.LIGHT
}
</script>

<style scoped lang="scss">

</style>